<template>
  <div class="tabbar">
    <div class="btn" v-for="(item,index) in tablist" :key="index" @click="handleClick(index)" :class="{active:currentIndex == index}">
        <img :src="item.pic" alt="">
        <span>{{item.text}}</span>
    </div>
  </div>
</template>

<script>
var pic = "https://img1.baidu.com/it/u=3862550611,1395576619&fm=253&fmt=auto&app=138&f=JPEG?w=587&h=500"
export default {
    data(){
        return {
            tablist:[
                {pic,text:'首页'},
                {pic,text:'订单'},
                {pic,text:'我的'},
            ],
            currentIndex:0,
        }
    },
    methods: {
        handleClick(index){
            this.currentIndex = index;
        }
    }
}
</script>

<style lang="scss" scoped>
.tabbar{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #555;
    background-color: #ffffff;

}
.btn{
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.btn.active{
    color: #3cbdff;
}
.btn img{
    width: 20px;
    height: 20px;
}
.btn span{
    font-size: 12px;
}
</style>